<!-- f r o m 7 5  2 7 1  8 9 2 0 -->
<template>
  <a-row :gutter="24">
    <a-col :md="24">
      <a-card :style="cardStyle" :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuer">
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item label="检验类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select
                    default-value="进货检验"
                    @change="handChange"
                    allowClear
                    placeholder="选择检验类型"
                    showSearch
                    optionFilterProp="children"
                  >
                    <a-select-option v-for="(item, index) in testTypeList" :key="index" :value="item.typeName">
                      {{ item.typeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="产品类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select
                    allowClear
                    placeholder="选择产品类型"
                    showSearch
                    optionFilterProp="children"
                    v-model="queryParam.productType"
                  >
                    <a-select-option v-for="(item, index) in purchaseTest" :key="index" :value="item.typeId">
                      {{ item.typeName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="检验日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-range-picker
                    style="width:100%"
                    :default-value="[this.$moment(dYear, dateFormat), this.$moment(nowDate, dateFormat)]"
                    :format="dateFormat"
                    :placeholder="['开始时间', '结束时间']"
                    @change="onDateChange"
                    @ok="onDateOk"
                  />
                </a-form-item>
              </a-col>
              <!-- <a-col :md="6" :sm="24">
                <a-form-item label="不合格内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-model="queryParam.unqualifiedContent" placeholder="请输入不合格内容"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="检验处置" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-model="queryParam.disposal" placeholder="请输入检验处置"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="供应商/客户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-model="queryParam.disposal" placeholder="请输入"></a-input>
                </a-form-item>
              </a-col> -->
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                  <a-button type="primary" @click="searchQuer">查询</a-button>
                  <!-- <a-button style="margin-left: 8px" @click="searchReset">重置</a-button> -->
                </a-col>
              </span>
            </a-row>
          </a-form>
        </div>
        <div id="main"></div>
      </a-card>
    </a-col>
  </a-row>
</template>
<!-- BY cao_yu_li -->
<script>
import * as echarts from 'echarts'
import CustomerModal from './modules/CustomerModal'
import { getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { openDownloadDialog, sheet2blob } from '@/utils/util'
import JDate from '@/components/jeecg/JDate'
import { getDateList } from '@/api/api'
export default {
  name: 'Total',
  mixins: [JeecgListMixin],
  components: {
    CustomerModal,
    JDate
  },
  data() {
    return {
      dYear: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
      nowDate: this.$moment(new Date()),
      dateFormat: 'YYYY-MM-DD',
      labelCol: {
        span: 5
      },
      queryParam: {
        testType: null
      },
      wrapperCol: {
        span: 18,
        offset: 1
      },
      echartData: null,
      // 查询条件
      queryParam: {},
      testTypeList: [{ typeName: '进货检验' }, { typeName: '过程检验' }, { typeName: '最终检验' }],
      ipagination: {
        pageSizeOptions: ['10', '20', '30', '100', '200']
      },
      purchaseTest: [],
      url: {
        list: '/testReport/getTestStatics',
        delete: '/testReport/remove',
        deleteBatch: '/supplier/deleteBatch',
        importExcelUrl: '/systemConfig/upload',
        exportXlsUrl: '/supplier/exportExcel',
        batchSetStatusUrl: '/supplier/batchSetStatus'
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
    }
  },
  mounted() {
    this.getType()
    this.searchQuer()
    this.echar()
  },
  methods: {
    getType(value) {
      var params = {}
      if (value) {
        params.testType = value
      } else {
        params.testType = '进货检验'
      }
      getDateList(params).then(res => {
        if ((res.code = 10000)) {
          console.log(res.data.records)
          this.purchaseTest = res.data.records
        }
      })
    },
    handChange(value) {
      this.queryParam={}
      this.queryParam.testType = value
      this.getType(value)
    },
    onDateChange: function(value, dateString) {
      this.queryParam.startTime = dateString[0]
      this.queryParam.endTime = dateString[1]
      console.log(this.queryParam)
    },
    onDateOk() {},
    echar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '质量统计',
          subtext: Number(this.echartData.qualifiedRate) / 100 + '%',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.echartData.unqualifiedCount, name: '不合格' },
              { value: this.echartData.numCount - this.echartData.unqualifiedCount, name: '合格' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    //get
    searchQuer() {
      let params = {}
      if (this.queryParam.startTime && this.queryParam.endTime) {
        params.startTime = this.queryParam.startTime
        params.endTime = this.queryParam.endTime
      } else {
        params.startTime = this.$moment(this.dYear).format('YYYY-MM-DD')
        params.endTime = this.$moment(this.nowDate).format('YYYY-MM-DD')
      }
      params.productType = this.queryParam.productType
      if (!this.queryParam.testType) {
        this.queryParam.testType = '进货检验'
      }
      params.testType = this.queryParam.testType
      getAction(this.url.list, params).then(res => {
        if (res.code === 200 || res.code === 10000) {
          //质量统计echart
          this.echartData = res.data
          this.echar()
        }
        if (res.code === 500 || res.code === 50000) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
#main {
  height: 300px;
  border: 1px solid gray;
}
@import '~@assets/less/common.less';
</style>
